import {
  defineComponent,
  ref,
} from 'vue'

import {
  ElButton,
  ElCol,
  ElDialog,
  ElMessage,
  ElRow,
} from 'element-plus'

import {
  ArrayTable,
  DatePicker,
} from '@formily/element-plus'

import { createForm } from '@formily/core'
import SchemaForm from '@/components/SchemaForm'
import usePageTable from '@/hooks/usePageTable'
import {
  addAwardInfo,
  deleteAwardInfo,
  editAwardInfo,
  getAllAwardList,
  getAwardInfo,
} from '@/api/scholarship'
import type { Award } from '@/types/scholarship'

export default defineComponent({
  setup() {
    const form = createForm<Award>({})
    const title = ref('')
    const open = ref(false)

    const handleAdd = () => {
      open.value = true
      title.value = '添加奖学金评定规则'
    }

    const handleView = async (row: Award) => {
      const { data } = await getAwardInfo(row.applicationAwardTypeId)
      form.setValues(data, 'overwrite')
      open.value = true
      title.value = '修改奖学金评定规则'
    }

    /** 列表逻辑 */
    const {
      Table,
      handleSearch,
    } = usePageTable<Award>(
      {
        getList: getAllAwardList,
      },
      [
        {
          key: 'applicationAwardType',
          title: '奖学金类型',
        },
        {
          key: 'title',
          title: '奖学金名称',
        },
        {
          key: 'startTime',
          title: '开始时间',
        },
        {
          key: 'endTime',
          title: '结束时间',
        },
        {
          key: 'operate',
          title: '操作',
          render: row => (
            <>
              <ElButton link type="primary" icon="Edit" onClick={() => handleView(row)}>修改</ElButton>
              <ElButton link type="danger" icon="Delete" onClick={() => handleDelete(row)}>删除</ElButton>
            </>
          ),
        },

      ],
    )
    void handleSearch()

    const submit = () => {
      form.submit(async (values) => {
        if (values.applicationAwardTypeId)
          await editAwardInfo(values)
        else
          await addAwardInfo(values)
        open.value = false
        ElMessage.success('操作成功')
        handleSearch()
      })
    }

    async function handleDelete(row: Award) {
      await deleteAwardInfo(row.applicationAwardTypeId)
      ElMessage.success('操作成功')
      handleSearch()
    }

    const schema = {
      type: 'object',
      properties: {
        layout: {
          'type': 'void',
          'x-component': 'FormLayout',
          'x-component-props': {
            labelWidth: 100,
          },
          'properties': {
            applicationAwardType: {
              'type': 'string',
              'title': '奖学金类型',
              'x-component': 'Input',
              'x-decorator': 'FormItem',
              'required': true,
            },
            title: {
              'type': 'string',
              'title': '奖学金名称',
              'x-component': 'Input',
              'x-decorator': 'FormItem',
              'required': true,
            },
            startTime: {
              'type': 'string',
              'title': '开始时间',
              'x-component': 'DatePicker',
              'x-decorator': 'FormItem',
              'required': true,
            },
            endTime: {
              'type': 'string',
              'title': '开始时间',
              'x-component': 'DatePicker',
              'x-decorator': 'FormItem',
              'required': true,
            },
            evaluationCriteriaList: {
              'type': 'array',
              'x-decorator': 'FormItem',
              'x-component': 'ArrayTable',
              'items': {
                type: 'object',
                properties: {
                  c1: {
                    'type': 'void',
                    'x-component': 'ArrayTable.Column',
                    'x-component-props': {
                      title: '评定条件',
                      align: 'center',
                    },
                    'properties': {
                      criteriaName: {
                        'type': 'string',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                      },
                    },
                  },
                  c2: {
                    'type': 'void',
                    'x-component': 'ArrayTable.Column',
                    'x-component-props': {
                      title: '详细描述',
                      align: 'center',
                    },
                    'properties': {
                      criteriaDescription: {
                        'type': 'string',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                      },
                    },
                  },
                  c5: {
                    'type': 'void',
                    'x-component': 'ArrayTable.Column',
                    'x-component-props': {
                      title: '操作',
                      prop: 'operations',
                      width: 200,
                      fixed: 'right',
                    },
                    'properties': {
                      item: {
                        'type': 'void',
                        'x-component': 'FormItem',
                        'properties': {
                          remove: {
                            'type': 'void',
                            'x-component': 'ArrayTable.Remove',
                          },
                          moveDown: {
                            'type': 'void',
                            'x-component': 'ArrayTable.MoveDown',
                          },
                          moveUp: {
                            'type': 'void',
                            'x-component': 'ArrayTable.MoveUp',
                          },
                        },
                      },
                    },
                  },
                },
              },
              'properties': {
                add: {
                  'type': 'void',
                  'x-component': 'ArrayTable.Addition',
                  'title': '添加评定规则',
                },
              },
            },

          },
        },
      },
    }

    return () => (
      <div class="p-2 md:p-4 h-full">
        <ElRow gutter={10} class="mb-4">
          <ElCol span={1.5}>
            <ElButton
              type="primary"
              plain
              icon="Plus"
              onClick={handleAdd}
            >
              新增
            </ElButton>
          </ElCol>
        </ElRow>
        <Table />

        <ElDialog v-model={open.value} title={title.value} width="750px" append-to-body>

          {{
            default: () => <SchemaForm form={form} schema={schema} components={{ DatePicker, ArrayTable }} />,
            footer: () => (
              <>
                <ElButton type="primary" onClick={submit}>
                  确 定
                </ElButton>
                <ElButton onClick={() => open.value = false}>
                  取 消
                </ElButton>
              </>
            ),
          }}
        </ElDialog>
      </div>
    )
  },
})
